<style lang="scss" scoped>
    .divider{
        background:rgb(238, 238, 238);
        text-align:center;
        font-size:12px;
        height:7px;
        > .trigger{
            top:2px;
            cursor:pointer;
            position:relative;
            z-index:10;
            background:rgb(238, 238, 238);
            padding:3px 10px 3px 10px;
            border-radius:5px;
            &:hover{
                color:#219cf9;
            }
        }
    }
</style>
<template>
    <div>
        <div v-if="loading" v-loading="loading" style="height: 200px; position: absolute; width:100%"></div>
        <iframe :src="fullpath" frameborder="0" scrolling="no" width="100%" height="200" ref="iframe"></iframe>
    </div>
</template>
<script>
    export default {
        name: 'ui-load-md',
        props: {
            file: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                fullpath: ((process.env.NODE_ENV === 'production') ? BASE_URL + 'bui/static/md2html/' : './static/md2html/') + this.fileName() + '.md.html',
                iframe: '',
                classNameCache: '',
                loading: true
            }
        },
        mounted() {
            this.iframe = this.$refs['iframe']
            this.iframe.onload = () => {
                setTimeout(() => {
                    this.loading = false
                    this.setIfeame()
                }, 200)
            }
            this.$nextTick(() => {
                this.classNameCache = this.$el.parentNode.className
            })

        },
        methods: {
            fileName() {
                return this.file.replace(/\.md$/, '')
            },
            setIfeame() {
                let iframe = this.iframe
                let iframeWin = iframe.contentWindow
                if (!iframeWin) return
                iframe.height = (iframeWin.document.documentElement.scrollHeight) + 10
            }
        }
    }
</script>


